<template>
  <div class="chart-container">
    <!-- 标题区域 -->
    <el-card class="filter-card">
  <el-row :gutter="20" type="flex" justify="space-between" align="middle">
    <el-col :span="12">
      <h2 class="page-title">整体销售量统计报表</h2>
    </el-col>
    <el-col :span="12" class="text-right">
      <el-button 
        type="success" 
        icon="el-icon-download" 
        @click="handleExport"
        :loading="exporting"
      >
        {{ exporting ? '导出中...' : '导出报表' }}
      </el-button>
    </el-col>
  </el-row>
</el-card>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">销售总量【最新数据】</div>
            <div class="data-value">{{ latestData.total_sales || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">销售额【最新数据】</div>
            <div class="data-value">¥{{ latestData.sales_amount || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">增长率【最新数据】</div>
            <div class="data-value" :class="{'positive': latestData.growth_rate > 0, 'negative': latestData.growth_rate < 0}">
              {{ latestData.growth_rate || 0 }}%
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示区域 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 销售量趋势图 -->
      <el-col :span="24">
        <el-card class="chart-card">
          <div slot="header">
            <span>销售量趋势分析</span>
          </div>
          <div ref="salesChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSaleNumData ,exportSaleNumData} from '@/api/chat/chat'

export default {
  name: "saleNum",
  data() {
    return {
      salesChart: null, // 图表实例
      chartData: [], // 图表数据
      latestData: {}, // 最新数据
      exporting: false, // 导出状态
    }
  },
  mounted() {
    this.initChart()
    this.fetchData()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.salesChart && this.salesChart.dispose()
  },
  methods: {
    // 初始化图表
    initChart() {
      this.salesChart = echarts.init(this.$refs.salesChart)
    },

    // 处理窗口大小变化
    handleResize() {
      this.salesChart && this.salesChart.resize()
    },

    // 获取数据
    async fetchData() {
      try {
        const res = await getSaleNumData()
        this.chartData = res.data
        // 获取最新数据
        this.latestData = this.chartData[this.chartData.length - 1] || {}
        this.updateChart()
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    //导出报表数据
    async handleExport() {
      if (this.exporting) return
      this.exporting = true
      try {
        let res=await exportSaleNumData();
        console.log(res)
        this.$downFile(res);
        this.$message.success('导出成功')
      } catch (error) {
        this.$message.error('导出失败')
      } finally {
        this.exporting = false
      }
    },

    // 更新图表
    updateChart() {
      const option = {
        title: {
          text: '销售量趋势'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['销售总量', '销售额', '增长率']
        },
        xAxis: {
          type: 'category',
          data: this.chartData.map(item => item.report_date)
        },
        yAxis: [
          {
            type: 'value',
            name: '销售总量',
            position: 'left'
          },
          {
            type: 'value',
            name: '销售额',
            position: 'right'
          },
          {
            type: 'value',
            name: '增长率(%)',
            position: 'right',
            offset: 80
          }
        ],
        series: [
          {
            name: '销售总量',
            type: 'bar',
            data: this.chartData.map(item => item.total_sales)
          },
          {
            name: '销售额',
            type: 'line',
            yAxisIndex: 1,
            data: this.chartData.map(item => item.sales_amount)
          },
          {
            name: '增长率',
            type: 'line',
            yAxisIndex: 2,
            data: this.chartData.map(item => item.growth_rate)
          }
        ]
      }
      this.salesChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  padding: 20px;

  .filter-card {
    .page-title {
      margin: 0;
      color: #303133;
      font-size: 20px;
    }

    .text-right {
      text-align: right;
    }

    .el-button {
      padding: 12px 20px;
      font-size: 14px;
      
      &.is-loading {
        padding-left: 30px;
      }
    }
  }

  .data-overview {
    margin: 20px 0;
    
    .data-item {
      text-align: center;
      
      .data-title {
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
      }
      
      .data-value {
        font-size: 24px;
        font-weight: bold;
        
        &.positive {
          color: #67C23A;
        }
        
        &.negative {
          color: #F56C6C;
        }
      }
    }
  }

  .chart-card {
    .chart {
      height: 400px;
      width: 100%;
    }
  }

  .el-card {
    margin-bottom: 20px;
  }
}
</style>